<template>
	<div>
		<el-dialog title="流程详情" :close-on-click-modal="false" v-model="visible" width="95%" @close="refreshEmit">
			<el-container>
				<el-main>
					<el-card>
						<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData"
							ref="vFormRef">
						</v-form-render>
					</el-card>
					<el-card style="margin-top:10px">
						<ApproveCommonFoot v-model:modelValue="taskParam" @refreshEmit="refreshEmit"
							@dataFormSubmit="dataFormSubmit" :isUpload="true" :disagreeShow="true"
							:taskId="taskParam.taskId" :processId="taskParam.insId" :busNo="taskParam.busNo">
						</ApproveCommonFoot>
					</el-card>
				</el-main>
				<el-aside width=" 300px">
					<ApproveHisDetailFoot ref="processdetailfoot" :processId="taskParam.insId"></ApproveHisDetailFoot>
				</el-aside>
			</el-container>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, nextTick, defineComponent } from 'vue'
import { ElMessage, ElLoading, MessageParamsTyped } from 'element-plus'
import request from '/@/utils/request'
import { systemApi } from '/@/api/systemapi'
import ApproveHisDetailFoot from "./approveHisDetailFoot.vue" //流程处理记录
import ApproveCommonFoot from "./approveCommonFoot.vue" //流程处理交互操作
export default defineComponent ({
	components: {
		ApproveHisDetailFoot,
		ApproveCommonFoot
	},
	setup(props, ctx) {
		const vFormRef = ref()
		const processdetailfootRef = ref()
		const state = reactive({
			visible: false,
			formJson:{"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion": 3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
			formData: {},
			optionData: {},
			customizeApi: '0',
			updateApiUrl: '',
			//流程相关表单数据
			taskParam: {
				taskId: '',
				busNo: '',
				discicription: '', //审批意见
				processKey: '',
				approveAdvice: '',//审批结果
				briefReport: '',//流程摘要,业务发起流程传入
				skipFirstNode: true,
				wf_param: {},
				variablesLocal: {},
				authCatagory: '',
				owner: '',// 授权人，从授权处理的流程点击进来的这个值为授权人
				formProperties: {},
				insId: ''
			},
			dataForm: {
				busId: '',
				formData: {},
				taskParams: {}
			},
		})
		// 打开弹窗
		const openDialog = (vformCode: string, processId: string, taskId: string, busNo: string, designerId: string, designerCode: string, authCatagory: string, owner: string) => {
			state.visible = true
			state.taskParam.taskId = taskId
			state.taskParam.busNo = busNo
			state.taskParam.authCatagory = authCatagory ? authCatagory : '0'
			state.taskParam.owner = owner ? owner : ''
			state.taskParam.insId = processId
			state.dataForm.busId = busNo
			//判断是不是自定义接口获取
			systemApi().getSysBusinessDesignerByCodeHasJson(designerCode).then((data2) => {
				if (data2 && data2.code === 0) {
					state.customizeApi = data2.data.customizeApi
					state.updateApiUrl = data2.data.updateApiUrl
					if (vformCode && vformCode !== '') {
						//如果节点定义了表单则使用节点定义的表单,如:'VFORM:OA001'
						vformCode = vformCode.startsWith('VFORM:') ? vformCode.replaceAll('VFORM:', '') : vformCode
						//通过表单编号去获取变淡json数据 
						systemApi().getFormDesignerByClassCode(vformCode).then((formData) => {
							if (formData && formData.code === 0) {
								vFormRef.value.setFormJson(formData.formJson)
								nextTick(() => {
									if (data2.data.customizeApi === '1') {
										//自定义接口的情况下通过自定义接口获取表单业务数据
										request({
											url: data2.data.detailApiUrl + '/' + busNo,
											method: 'get',
										}).then((data0) => {
											//自定义接口的返回值需要满足json格式{"组件名称": "组件值", .....}
											vFormRef.value.setFormData(data0.data.formData)
										})
									} else {
										//通过公用的接口来获取表单业务数据
										systemApi().getBusinessCommonById(busNo).then((data1) => {
											if (data1 && data1.code === 0 && data1.data !== null ) {
												vFormRef.value.setFormData(data1.data.formData)
											}
										})
									}
								})
							} else {
								vFormRef.value.setFormJson(data2.data.newFormJson)
								nextTick(() => {
									if (data2.data.customizeApi === '1') {
										//自定义接口的情况下通过自定义接口获取表单业务数据
										request({
											url: data2.data.detailApiUrl + '/' + busNo,
											method: 'get',
										}).then((data0) => {
											//自定义接口的返回值需要满足json格式{"组件名称": "组件值", .....}
											vFormRef.value.setFormData(data0.data.formData)
										})
									} else {
										//通过公用的接口来获取表单业务数据
										systemApi().getBusinessCommonById(busNo).then((data1) => {
											if (data1 && data1.code === 0 && data1.data !== null ) {
												vFormRef.value.setFormData(data1.data.formData)
											}
										})
									}
								})
							}
						})
					} else {
						vFormRef.value.setFormJson(data2.data.newFormJson)
						nextTick(() => {
							if (data2.data.customizeApi === '1') {
								//自定义接口的情况下通过自定义接口获取表单业务数据
								request({
									url: data2.data.detailApiUrl + '/' + busNo,
									method: 'get',
								}).then((data0) => {
									//自定义接口的返回值需要满足json格式{"组件名称": "组件值", .....}
									vFormRef.value.setFormData(data0.data.formData)
								})
							} else {
								//通过公用的接口来获取表单业务数据
								systemApi().getBusinessCommonById(busNo).then((data1) => {
									if (data1 && data1.code === 0 && data1.data !== null ) {
										vFormRef.value.setFormData(data1.data.formData)
									}
								})
							}
						})
					}
				}
			}).catch(() => {
				ElMessage.error('无法获取业务表单信息')
			})
		}
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false;
		}
		const dataFormSubmit = (_taskParam: any) => {
			vFormRef.value.getFormData().then((formData: any) => {
				state.dataForm.formData = formData
				state.dataForm.taskParams = _taskParam
				const loading = ElLoading.service({
					lock: true,
					text: '处理中',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				if (state.customizeApi === '1') {
					//自定义后端接口的情况
					request({
						url: state.updateApiUrl,
						method: 'post',
						data: state.dataForm
					}).then((data) => {
						if (data && data && data.code === 0) {
							ElMessage.success('提交成功')
							refreshEmit()
						} else {
							ElMessage.error(data.msg)
						}
					}).catch(() => {
						ElMessage.error('提交数据失败')
					}).finally(() => {
						loading.close()
					})
				} else {
					//默认的后端接口，以json格式存储表单数据
					systemApi().submitBusinessCommonUpdate(state.dataForm).then((data) => {
						if (data && data && data.code === 0) {
							ElMessage.success('提交成功')
							refreshEmit()
						} else {
							ElMessage.error(data.msg)
						}
					}).catch(() => {
						ElMessage.error('提交数据失败')
					}).finally(() => {
						loading.close()
					})
				}
			}).catch((error: MessageParamsTyped | undefined) => {
				ElMessage.error(error)
			})
		}
		return{
			openDialog,
			closeDialog,
			refreshEmit,
			vFormRef,
			processdetailfootRef,
			dataFormSubmit,
			...toRefs(state),
		}
	}
})
</script>

<style scoped>

</style>